<template>
<div class='main'>
        <myalph  v-if="flag" @son='skip' :az='citystart'></myalph>
        <div class='city'>
          <div class="title">
            <div class="top">
              <span @click="back" class='iconfont icon-fanhui'></span>
              <p @click='islight' :class="[{active:light}]" class='border'>国内</p><p @click='islight' :class="[{active:twolight}]" class='border two'>国际地区</p>
            </div>
            <div class="bottom">
                <input  type="search" name="" id="" placeholder="请输入要搜索的城市" v-model="searchValue">
            </div>
         </div>
       <div class='wrap' ref="wrapper">
           <mysearch v-if="!flag" :searchcity='searchValueArray'></mysearch>
        <div class="content" v-if="flag">
            <div class="now">
                <div class="nav">
                    <p>当前城市</p>
            </div>
                <ul>
                    <li>{{ $store.state.city }}</li>
                </ul>
             </div>
            <div class="hotcity">
                <div class="nav">
                    <p>热门城市</p>
                </div>
                <ul>
                    <li @click='select(item.name)' v-for="item in hotcity" :key="item.id">{{ item.name }}</li>
                </ul>
            </div>
            <div class="sortcity" v-for="(item,key) in citydata" :key="key">
                <div :ref="key"  class="nav">
                    <p>{{ key }}</p>
                </div>
                <ul>
                    <li @click='selectCity(itemlist.name)' v-for="itemlist of item" :key="itemlist.id">{{itemlist.name}}</li>
                </ul>            
            </div>
             </div>
            </div>   
            </div>
    
    
    
    
    
    </div>
</template>

<script>
import mysearch from './search'
import BScroll from 'better-scroll'
import myalph from './alph'
import axios from 'axios'

    export default{
        data () {
            return {
                light:true,
                twolight:false,
                hotcity:[],
                citydata:[],
                citystart:[],
                cityskip:'' ,
                flag:true,
                searchflag:false,
                searchValue:'',
                searchValueArray:[],
                cityallname:[],
                test:false  
            }
        },
        mounted () {
            this.scroll = new BScroll(this.$refs.wrapper)
            this.getData()       
        },
        updated () {
             this.scroll = new BScroll(this.$refs.wrapper)
        },
        methods: {
            back(){
                this.$router.go(-1)
            },
            islight(){
                this.light=!this.light;
                this.twolight=!this.twolight;           
            },
            getData(){
                axios.get('/api/city.json').then(result=>{
                    if(result.status==200){
                        this.hotcity = result.data.data.hotCities
                        this.citydata = result.data.data.cities
                        for(var i in this.citydata){
                            this.citystart.push(i)
                            this.citydata[i].forEach(item => {
                                this.cityallname.push(item)                      
                            });
                        }
                    }
                })
            },
            skip(value){           
                this.cityskip=value
            },
            ch(){
                console.log(this.searchValueArray.length)
            },
            select(name){
                // this.$store.dispatch('pickCity') 

                //没用 ACTION 直接mutations  this.$store.commit('pickCity',name) 
                    this.$store.dispatch('getCity',name)   // 用了 vuex 的action 
                    this.$router.push({name:'index'})
                    
            },
            selectCity(name){
                //  this.$store.commit('pickCity',name) 
                this.$store.dispatch('getCity',name)
                this.$router.push({name:'index'})
                
            }     
        },
        components:{
            myalph,
            mysearch
        },
        watch:{
            cityskip () {
                if(this.cityskip){
                    const element = this.$refs[this.cityskip][0]
                     this.scroll.scrollToElement(element,500)
                      
                }
            },
            searchValue () {
                this.flag=false
                var searchList=[]
                for(let i in this.citydata){
                    this.citydata[i].forEach(item=>{
                        if(
                        item.name.indexOf(this.searchValue)>-1
                        ||
                        item.spell.indexOf(this.searchValue)>-1){
                         searchList.push(item)   
                        }
                    })
                }
                this.searchValueArray=searchList
            },
            searchValueArray(){
                if(this.searchValueArray.length==this.cityallname.length){
                    this.flag=true
                }else{
                     this.flag=false
                }
            }       
        }
        
    }
</script>


<style lang="scss" scoped>
@import '../../css/sass/common.scss';
.border{
    border-color: #63EFF5;
}
.border.two{
    border-left: none;
}
.active{
    background-color: white;
    color: #16BFC7!important;
}
.wrap{
     height: 100%;
    overflow: hidden;
}


.main{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.city{
     width: 100%;
    height: 89%;  
  .title{
            width: 100%;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            background-color: #16BFC7;
    .top{
        padding-top: 0.1rem;
        display: flex;
        width: 100%;
        justify-content:center;
        align-items: center;
        span{
            position: absolute;
            top: pt(9);
            left: pt(10);
        } 
        p{  
            color:#fff;
            width: 30%;
            text-align: center;
            height: 0.5rem;
            line-height: 0.5rem;
            // background-color: #fff;
        }
       
    }
    .bottom{
        padding:0.1rem 0.1rem 0.1rem 0.1rem;
           width: 100%;
        input{
            width: 100%;
            height: 0.7rem;
            text-align: center;
        }

    }
  }
  .now{   
    .nav{
        background-color: #f5f5f5;
        height: pt(36);
        line-height: pt(36);
        padding-left: 0.2rem;
       }
     ul{
        padding: 0.18rem 0rem 0.18rem 0.1rem;
        li{
            width: 1.8rem;
            background-color: #fff;
            text-align: center;
            border:pt(1.3) solid #E0E0E0;
            height: 0.4rem;
            line-height: 0.4rem;
            border-radius:10%;
        }
       }
  }
  .hotcity{
       .nav{
        background-color: #f5f5f5;
        height: pt(36);
        line-height: pt(36);
        padding-left: 0.2rem;
    }
       ul{
        padding: 0.18rem 0rem 0.1rem 0.1rem;
        display: flex;
        flex-wrap: wrap;
        li{
            margin: 0rem 0.1rem 0.18rem 0;
            width: 1.8rem;
            background-color: #fff;
            text-align: center;
            border:pt(1.3) solid #E0E0E0;
            height: 0.4rem;
            line-height: 0.4rem;
            border-radius:10%;
        }
    }
  }
  .sortcity{
          .nav{
        background-color: #f5f5f5;
        height: pt(36);
        line-height: pt(36);
        padding-left: 0.2rem;
    }
    ul{
        padding:0rem 0rem 0.1rem 0.1rem;
        li{
            height: 0.7rem;
            line-height: 0.7rem;
            border-bottom: pt(1.4) solid #eee;
            border-top: pt(1.4) solid #eee;
        }
    }
  }
}

</style>

